<template>
  <div class="vue-container">
    <el-dialog
      ref="maxDialog"
      v-drag
      :title="ruleForm.id ? '编辑公告' : '新增公告'"
      :visible.sync="dialogVisible"
      width="600px"
      @closed="closedDialog"
    >
      <el-form
        ref="reform"
        v-loading="loading"
        :model="ruleForm"
        status-icon
        :rules="rules"
        :size="size"
        label-width="90px"
        :show-message="showMessage"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        element-loading-text="数据正在加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="公告标题" prop="title">
              <el-input
                v-model.trim="ruleForm.title"
                placeholder="请输入公告标题"
                type="text"
                maxlength="20"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio
                  v-for="(item, index) in obj.statusList"
                  :key="index"
                  :label="Number(item.code)"
                >{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number
                v-model.trim="ruleForm.sort"
                :min="0"
                placeholder="请输入排序"
                style="width: 100%;"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <!--<el-col :span="12">-->
          <!--  <el-form-item label="开始时间" prop="startTime">-->
          <!--    <el-date-picker-->
          <!--      v-model="ruleForm.startTime"-->
          <!--      value-format="timestamp"-->
          <!--      type="datetime"-->
          <!--      placeholder="选择开始时间"-->
          <!--    />-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
          <!--  <el-form-item label="结束时间" prop="endTime">-->
          <!--    <el-date-picker-->
          <!--      v-model="ruleForm.endTime"-->
          <!--      value-format="timestamp"-->
          <!--      type="datetime"-->
          <!--      placeholder="选择结束时间"-->
          <!--    />-->
          <!--  </el-form-item>-->
          <!--</el-col>-->
          <el-col :span="24">
            <el-form-item label="公告内容" prop="content">
              <el-input
                v-model="ruleForm.content"
                placeholder="请输入公告内容"
                :rows="10"
                type="textarea"
                maxlength="500"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取消</el-button>
        <el-button :size="size" :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin/save'
export default {
  name: 'NoticeSave',
  mixins: [mixin],
  data() {
    return {
      // 表单校验
      rules: {
        title: [{ required: true, message: '请输入公告标题', trigger: 'change' }],
        content: [{ required: true, message: '请输入公告内容', trigger: 'change' }],
        status: [{ required: true, message: '请选择公告状态', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 弹出窗口加载
    openDialog(rows) {
      this.dialogVisible = true
      if (rows) {
        this.ruleForm = { ...this.ruleForm, ...rows }
      } else {
        this.ruleForm = { status: 1, sort: 0 }
      }
    }
  }
}
</script>
